<!--
  介绍如何使用明细表组件
-->
<!--
 1.基础使用
 FormDetail组件可以接收五个属性tableColumn formDetail,tableName,readonly,rules
 1.tableColumn的作用是设置表格的列，它接收一个对象数组，里面的每个对象都是一个列的配置，对象中可以包含以下属性:
   prop属性(必填): 指定该列的数据收集到哪一个属性下面。
   label:指定该列的表头名称。
   editType:editType指定该列以怎样的形式展现在表格中,目前包含:input,textarea,select,dept(选部门组件),user(选人组件),datePicker,upload(文件上传)
            每一种editType的配置稍有差别，具体使用见下面示例代码。
   readonly:设置该列是否可以编辑,优先级低于组件的readonly属性,如果明细表设置了readonly为true,这里设置readonly为false,该列仍然不可编辑
   rules: 指定这一列的校验规则。
   tableColumnProps:该配置接收一个对象,对象的所有属性都会加到内部封装的fks-table-column上，可以定制列的宽度等
   formItemProps:该配置接收一个对象,对象的所有属性都会加到内部封装的fks-form-item上。
 2.formDetail:表格中的所有数据都收集到了这个属性下，格式为[{name:"xx",age:"18"},{name:"xxx",age:"20"}],注意：绑定该属性需要加.sync
 3.tableName:设置明细表的名称。会展示在明细表的左上方
 4.readonly:设置整个明细表是否可读，为true的话,整个明细表都不可修改、
 5.rules:设置明细表的规则,格式为{name:[{required:true}]},这里的规则会和tableColumn里面rules合并,两个规则都会生效
-->
<!--
2.自定义列
  明细表组件支持自定义表格列中的元素,例如下的代码中，我想自定义name列显示为按钮。做法如下。会传出两个对象，该行和该列的数据
   <FormDetail :tableColumn="tableColumn" :formDetail.sync="formDetail">
      <template v-slot:name="{row,col}">
          <fks-button @click="handleClick(row,col)">点击</fks-button>
      </template>
   </FormDetail>
-->

<template>
  <FormDetail
    :table-column="tableColumn"
    :form-detail.sync="formDetail"
  >
    <template v-slot:name="{row,col}">
      <fks-button @click="handleClick(row,col)">
        点击
      </fks-button>
    </template>
  </FormDetail>
</template>

<script>
import FormDetail from './index'

export default {
  name: 'Readme',
  components: {FormDetail},
  data() {
    return {
      tableColumn: [
        {
          prop: 'name',
          editType: 'input',
          label: '姓名',
          rules: [{required: true, trigger: 'blur'}],
          tableColumnProps:{width:'300px'} //配置该列的宽度为300px
        },
        {
          prop: 'sex',
          editType: 'select',
          label: '性别',
          options: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '2'
            }
          ],//对于editType为select的，需要提供options选项来配置选择项
          rules: [{required: true, trigger: 'change'}],
        },
        {
          prop: 'department',
          editType: 'dept',
          deptId:'departmentId',//对于editType为dept的,因为部门信息一般需要存储两个字段。所以需要额外配置deptId属性,在此处,部门名称存储在了department属性下,部门id存储在了departmentId属性下
          label: '部门',
          rules: [{required: true, trigger: 'change'}],
        },
        {
          prop:'people',
          username:'peopleUserName',
          editType: 'user',//对于editType为user的,因为人员信息一般需要存储两个字段。所以需要额外配置username属性,在此处,用户真实姓名存储在了people属性下,用户名存储在了peopleUserName属性下
          label:'人员',
          rules: [{required: true, trigger: 'change'}],
        },
        {
          prop:'attachment',
          editType: 'upload',
          label:'附件',
          files:'files',
          filesProp:'attachmentFiles',//上传文件组件如果需要做必填的校验。需要获取到上传文件列表。此处文件存储在attachmentFiles属性中。
          tableColumnProps: {width: '200px'},
          rules: [{required: true, trigger: 'change',validator:(rule,value,callback)=>{
            //文件必填校验,出于明细表内部封装的原因，需要在下一个事件循环中校验
            this.$nextTick(()=>{
              const index = rule.field.split('.')[1]
              const fileNum = this.formDetail[index].attachmentFiles.length
              if(fileNum<=0){
                callback (new Error('请上传文件'))
              }else {
                callback()
              }
            })
          }
          }],
        },
        {
          prop:'desc',
          editType: 'textarea',
          label:'简介'
        },
      ],
      formDetail:[]
    }
  },
  methods:{
    handleClick(row,col){
      console.log(row,col)
    }
  }
}
</script>
